<script setup lang='ts'>
import EmojiPicker from 'vue3-emoji-picker'
import { Promotion } from '@element-plus/icons-vue'

const MAX_LENGTH = 200
const input = ref()
const handleInput = () => {
  if (input.value.innerText.length > MAX_LENGTH) {
    input.value.innerText = input.value.innerText.slice(0, MAX_LENGTH)
  }
}

// emoji
const isShowEmoji = ref(false)
const emojiPicker = ref()
const onSelectEmoji = (emoji: any) => {
  input.value.innerText += emoji.i
  isShowEmoji.value = false
}
const toggleEmoji = () => {
  isShowEmoji.value = !isShowEmoji.value
}
</script>
<template>
  <footer class="chat-footer">
    <nav class="chat-footer-nav">
      <img class="svg" @click="toggleEmoji" src="@/assets/icons/emoji.svg" alt="" />
      <img class="svg" src="@/assets/icons/image.svg" alt="" />
      <img class="svg" src="@/assets/icons/video.svg" alt="" />
      <img class="svg" src="@/assets/icons/file.svg" alt="" />
      <img class="svg" src="@/assets/icons/voice.svg" alt="" />
      <img class="svg" src="@/assets/icons/tel.svg" alt="" />
      <img class="svg" src="@/assets/icons/tel_video.svg" alt="" />
      <img class="svg" src="@/assets/icons/record.svg" alt="" />
    </nav>

    <div class="chat-footer-input">
      <el-dialog title="表情" width="30%" v-model="isShowEmoji">
        <EmojiPicker
          ref="emojiPicker"
          class="dialog-div"
          :native="true"
          :disable-skin-tones="true"
          @select="onSelectEmoji"
          :static-texts="{ placeholder: '搜索表情' }"
        />
      </el-dialog>
      <div ref="input" class="chat-input" contenteditable="true" @input="handleInput"></div>
      <el-button :icon="Promotion" type="success" size="large">发送</el-button>
    </div>
  </footer>
</template>
<style scoped lang='scss'>
.chat-footer {
  height: 30%;
  display: flex;
  flex-direction: column;
  padding-left: 8px;
  border-top: 1px solid #e0e0e0;
  background-color: $chat;
  &-nav {
    display: flex;
    padding: 10px 0;
    .svg {
      width: 24px;
      height: 24px;
      margin-right: 16px;
      cursor: pointer;
    }
  }
  &-input {
    flex: 1;
    display: flex;
    justify-content: space-between;
    position: relative;
    .chat-input {
      flex: 1;
      height: 100%;
      overflow-y: auto;
      word-wrap: anywhere;
      word-break: break-all;
      outline: none;
      padding: 5px;
      line-height: 1.5;
      text-align: left;
      &::before {
        content: '请输入内容';
        position: absolute;
        left: 10px;
        top: 10px;
        color: #ccc;
        font-size: 14px;
        pointer-events: none;
      }
      &:not(.empty)::before {
        content: none;
      }
      &:empty::before {
        content: '请输入内容';
      }
      &:focus::before {
        content: none;
      }
    }
    .el-button {
      position: absolute;
      right: 5%;
      bottom: 5%;
    }
  }
}
// .dialog-div {
//  margin: 20px 0;
// }
</style>